<template>
	<view>
		<!-- uni自定义导航组件 -->
		<uni-nav-bar left-icon="back" :statusBar="true" :border="false" @clickLeft="goBack">
			<view class="flex align-center justify-center w-100">
				所有人可见<text class="iconfont icon-shezhi"></text>
			</view>
		</uni-nav-bar>
		<!-- uni文本域组件 -->
		<textarea :value="content" placeholder="说一句话吧" class="uni-text px-2" @input="contentInput"></textarea>
		<!-- 多图上传 -->
		<upload-image ref="uploadImageRef" :show="show" :list="imageList" @change="changeImage"></upload-image>
		<!-- 底部操作条 -->
		<view class="fixed-bottom bg-white flex align-center" style="height: 85rpx;">
			<view class="iconfont icon-caidan footer-btn animated" hover-class="jello"></view>
			<view class="iconfont icon-huati footer-btn animated" hover-class="jello"></view>
			<view class="iconfont icon-tupian footer-btn animated" hover-class="jello" @click="iconClickEvent('uploadImage')"></view>

			<view class="bg-main text-white ml-auto flex justify-center align-center rounded mr-2 animated" hover-class="jello"
			 style="width: 140rpx;height: 60rpx;">发送</view>
		</view>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-ui/uni-nav-bar/uni-nav-bar.vue';
	import uploadImage from '@/components/common/upload-image.vue';
	export default {
		components: {
			uniNavBar,
			uploadImage
		},
		data() {
			return {
				content: '',
				imageList: [],
				showBack: false
			}
		},
		computed: {
			show() {
				return this.imageList.length > 0
			}
		},
		// 监听返回事件
		onBackPress() {
			if ((this.content !== '' || this.imageList.length > 0) && !this.showBack) {
				uni.showModal({
					content: '是否保存为草稿？',
					showCancel: true,
					cancelText: '不保存',
					confirmText: '保存',
					success: res => {
						// 点击确认
						if (res.confirm) {
							// console.log('保存到本地:content:', this.content)
							this.store()
						} else {
							// 点击取消保存，清除缓存
							uni.removeStorage({
								key: 'add-input'
							})
						}
						// 手动执行返回
						uni.navigateBack({
							delta: 1
						});
					}
				});
				this.showBack = true
				return true
			}
		},
		// 页面加载时执行
		onLoad() {
			uni.getStorage({
				key: 'add-input',
				success: (res) => {
					if (res.data) {
						let result = JSON.parse(res.data)
						// console.log("从本地存储中获取result:" + result)
						this.content = result.content
						this.imageList = result.imageList
						// console.log("从本地存储获取内容(content)：[" + this.content + "]")
						// console.log("从本地存储获取内容(imageList)：[" + this.imageList + "]")
					}
				}
			})
		},
		methods: {
			iconClickEvent(e) {
				switch (e) {
					case 'uploadImage':
						this.$refs.uploadImageRef.chooseImage()
						break;
				}
			},
			// 帖子内容监听
			contentInput(e) {
				this.content = e.detail.value
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 选中图片
			changeImage(e) {
				this.imageList = e
			},
			// 保存草稿
			store() {
				// 保存为本地存储
				let obj = {
					content: this.content,
					imageList: this.imageList
				}
				// console.log("obj>>>" + JSON.stringify(obj))
				uni.setStorage({
					key: 'add-input',
					data: JSON.stringify(obj)
				})
			}
		}
	}
</script>

<style>
	.footer-btn {
		width: 86rpx;
		height: 86rpx;
		justify-content: center;
		align-content: center;
		font-size: 50rpx;
	}
</style>
